<template>
  <div class="wrap">
    <div class="icon" v-if="info.icon">
      <slot name="icon"><img :src="info.icon" alt="" /></slot>
    </div>
    <div class="title">
      <slot name="title">{{ info.title }}</slot>
    </div>
    <slot
      ><div class="desc" v-if="info.desc">{{ info.desc }}</div></slot
    >
    <slot name="btns" :btns="info.btns" :clearMessageData="clearMessageData">
      <div
        class="btns form"
        v-if="info.btns"
        :class="{ justify: info.btns.length > 1 }"
      >
        <Button
          :type="item.type || 'info'"
          :class="{
            n2: info.btns.length === 2,
            n3: info.btns.length > 2,
          }"
          block
          round
          @click="item.to"
          v-for="(item, index) in info.btns"
          :key="index"
          >{{ item.text }}</Button
        >
      </div></slot
    >
  </div>
</template>

<script>
import { Button } from "vant";
export default {
  name: "messagePage",
  props: {
    msgData: {
      default: () => null,
    },
  },
  computed: {
    info() {
      if (this.maps[this.$route.name]) {
        return this.maps[this.$route.name];
      }
      return this.messageData || {};
    },
  },
  beforeRouteLeave(to, from, next) {
    // this.clearMessageData();
    next();
  },
  data() {
    let messageData = {};
    let params = this.$route.params;
    if (params.messageData) {
      window.sessionStorage.setItem(
        "messageData",
        JSON.stringify(params.messageData)
      );
    }

    if (this.msgData) {
      messageData = this.msgData;
    } else {
      messageData = window.sessionStorage.getItem("messageData");
      try {
        if (messageData) messageData = JSON.parse(messageData);
      } catch (error) {
        messageData = {};
        console.log(error);
      }
    }
    return {
      messageData,
      maps: {
        errorPage401: {
          title: "链接已失效",
          desc: "当前链接已失效，请重新进入",
          icon: require("../assets/images/message/error.png"),
          btns: [
            {
              text: "返回",
              to: () => {},
            },
          ],
        },
        errorPage404: {
          title: "404",
          desc: "页面未找到",
          icon: require("../assets/images/message/error.png"),
          btns: [
            {
              text: "返回",
              to: () => {
                this.$router.push({
                  name: "faceRecognition",
                });
              },
            },
          ],
        },
        faceMessage: {
          icon: require("../assets/images/message/face.png"),
          btns: [
            {
              text: "重新识别",
              to: () => {
                this.$router.push({
                  name: "faceRecognition",
                });
              },
            },
          ],
          ...messageData,
        },
        paymentResult: {
          ...messageData,
          btns: [
            {
              text: "确定",
              to: () => {
                if (messageData.type == 1) {
                  this.$router.push({
                    name: "paymentDetails",
                  });
                } else if (messageData.type == 2) {
                  this.$router.push({
                    name: "credit",
                  });
                }
              },
            },
          ],
        },
      },
    };
  },
  components: {
    Button,
  },
  methods: {
    clearMessageData(fn) {
      window.sessionStorage.removeItem("messageData");
      fn && fn();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.wrap {
  background-color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .icon {
    width: 100%;
    margin-top: 100px;
    img {
      width: 300px;
      margin: 0 auto;
      display: block;
      // width: 100%;
    }
  }
}
.title,
.desc {
  padding: 30px 50px 30px 50px;
  font-size: 32px;
  text-align: center;
}
.title {
  font-weight: bold;
  font-size: 48px;
}
.btns {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 80px;
  margin-left: 20px;
  margin-right: 20px;
  justify-content: center;
  &.justify {
    justify-content: space-between;
  }
  .n2,
  .sm {
    width: calc(50% - 0.5em) !important;
  }
  .n3 {
    width: calc(33% - 0.5em) !important;
  }
  button {
    margin: 0 !important;
    margin-bottom: 1em !important;
    &:nth-child(2n + 0) {
      margin-right: 0;
    }
  }
}
</style>
